import { createStyles } from 'antd-style';

export const useStartButtonStyles = createStyles(({ token }) => {
    return {
        iconLoading: {
            zIndex: 1,
            path: {
                fill: token.colorText,
            },
        },
        iconLoaded: {
            zIndex: 1,  
        },
        icon: {
            fontSize: '120px',
            '.st1,.st6': {
                fill: '#e4761b',
                stroke: '#e4761b',
                strokeLinecap: 'round',
                strokeLinejoin: 'round',
            },
            '.st6': {
                fill: '#f6851b',
                stroke: '#f6851b',
            },
            zIndex: 1,
        },
        button: {
            '@keyframes rotation': {
                from: {
                    rotate: '0deg',
                },
                to: {
                    rotate: '-360deg',
                },
            },
            width: '275px',
            height: '275px',
            background: 'transparent',
            outline: 'none',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            position: 'relative',
            cursor: 'pointer',
            boxShadow: '0px 12px 64px 0px #00260880',
            borderRadius: '50%',
            '&.loaded': {
                'span.inner-shadow::before': {
                    opacity: 1,
                },
            },

            '--animation-speed': '3.5s',
            ':not(.no-loaded-elements)': {
                '&.stop-animation': {
                    '::before, ::after': {
                        animationPlayState: 'paused',
                    },
                },
                '::before': {
                    content: '""',
                    backgroundImage: 'url(/loader-element-left.svg)',
                    position: 'absolute',
                    width: '200px',
                    height: '220px',
                    right: '45px',
                    bottom: '29px',
                    borderRadius: '46%',
                    transform: 'scale(1.1)',
                    transformOrigin: '111px 110px',
                    animation: 'rotation var(--animation-speed) linear forwards infinite',
                    rotate: '0',
                    backgroundRepeat: 'no-repeat',
                    zIndex: 1,
                },
                '::after': {
                    content: '""',
                    backgroundImage: 'url(/loader-element-right.svg)',
                    position: 'absolute',
                    width: '200px',
                    height: '220px',
                    right: '14px',
                    bottom: '22px',
                    borderRadius: '50%',
                    overflow: 'hidden',
                    transform: 'scale(1.1)',
                    transformOrigin: '79px 105px',
                    animation: 'rotation var(--animation-speed) linear forwards infinite',
                    rotate: '0',
                    backgroundRepeat: 'no-repeat',
                },
            },
            span: {
                '--bg-offset': '20px',
                '&.inner-shadow': {
                    '::after': {
                        boxShadow: 'inset 0px 12px 64px 0px #00260880',

                        content: '""',
                        position: 'absolute',
                        top: 'var(--bg-offset)',
                        left: 'var(--bg-offset)',
                        right: 'var(--bg-offset)',
                        bottom: 'var(--bg-offset)',
                        borderRadius: '50%',
                        zIndex: 1,
                    },
                    '::before': {
                        content: '""',
                        position: 'absolute',
                        top: 'calc(var(--bg-offset) - 1px)',
                        left: 'calc(var(--bg-offset) - 1px)',
                        right: 'calc(var(--bg-offset) - 1px)',
                        bottom: 'calc(var(--bg-offset) - 1px)',
                        borderRadius: '50%',
                        zIndex: 0,
                        background: 'linear-gradient(248.85deg, #087091 -1.77%, #C7ED5C 104.39%)',
                        opacity: 0,
                        transition: 'opacity 2s',
                    },
                },
                '&.gradient-ring': {
                    zIndex: 1,
                    '&.error': {
                        '::before': {
                            background: 'linear-gradient(248.85deg, #DB0505 -1.77%, #E66565 104.39%) border-box',
                        },
                    },
                    '::before': {
                        '--border-padding': '0px',
                        content: '""',
                        position: 'absolute',
                        inset: 0,
                        border: '20px solid transparent',
                        background: 'linear-gradient(240.95deg, #087091 -1.43%, #337E4F 39.11%, #7C9F1A 96.43%) border-box',
                        mask: 'linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0)',
                        maskComposite: 'exclude',
                        borderRadius: '50%',
                        top: 'var(--border-padding)',
                        left: 'var(--border-padding)',
                        right: 'var(--border-padding)',
                        bottom: 'var(--border-padding)',
                    },
                },
            },
        },
    };

});
